<!--客户店铺配置添加与修改-->
<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? '新增客户店铺' : '编辑客户店铺'" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
             label-width="120px">
      <el-form-item prop="checkStatus" label="审核状态">
        <ren-radio-group v-model="dataForm.checkStatus" dict-type="checkStatus"></ren-radio-group>
      </el-form-item>
<!--      <el-form-item prop="name" label="联系姓名">-->
<!--        <el-input v-model="dataForm.name" placeholder="请输入联系姓名"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item prop="phone" label="联系电话">-->
<!--        <el-input v-model="dataForm.phone" placeholder="请输入联系电话"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="地区">-->
<!--        <el-cascader-->
<!--            v-model="value"-->
<!--            :options="options"-->
<!--            :props="{value:'name',label:'name',children:'children'}"-->
<!--            filterable></el-cascader>-->
<!--      </el-form-item>-->
<!--      <el-form-item prop="address" label="详细地址">-->
<!--        <el-input v-model="dataForm.address" placeholder="请输入详细地址"></el-input>-->
<!--      </el-form-item>-->
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import addressData from "@/utils/address-data";

export default {
  data() {
    return {
      visible: false,
      productList: [],                //商品列表
      options:addressData,            //地址列表
      value: [],                      //选中地址
      dataForm: {
        id: '', 							  //id
        checkStatus: '', 				//审核状态
        name:'',                //姓名
        phone: '', 					    //电话
        province: '', 					//省份
        city: '', 						  //市
        area: '', 						  //区
        address: '', 					  //详细地址
      }
    }
  },
  computed: {
    dataRule() {
      return {
        name: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        checkStatus: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        address: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
        ],
        phone: [
          {required: true, message: this.$t('validate.required'), trigger: 'blur'},
          {pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.value = []
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo() {
      this.$http.get(`/api/checkUserRecords/${this.dataForm.id}`).then(({data: res}) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        this.value = []
        if (res.data.province){
          this.value.push(res.data.province,res.data.city,res.data.area)
        }
      }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.value.length!==0){
          this.dataForm['province'] =this.value[0]
          this.dataForm['city'] =this.value[1]
          this.dataForm['area'] =this.value[2]
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/api/checkUserRecords', this.dataForm).then(({data: res}) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {
        })
      })
    }, 1000, {'leading': true, 'trailing': false}),
  }
}
</script>
<style>
.el-upload el-upload-picture-card {
  display: none;
}

.img_con {
  position: relative;
  display: flex;
}

.deduct_img {
  width: 140px;
  height: 140px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.remove_img {
  position: absolute;
  right: 5px;
  top: -5px;
  color: red;
  cursor: pointer;
}
</style>
